<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {

            width: 368px;
            height: 220px;
            background-color: #00a1cc;
            overflow-x: hidden;
            overflow-y: hidden;
            white-space: nowrap;
            position: relative;
        }
        #box img {
            font-size: 0;
            float: left;
        }

        .txt {
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            text-align: center;
            background-color: rgba(0,0,0,0.5);
        }
        .active {
            color: white;
        }
    </style>
</head>
<body>
<div id="box">
  <div style="width: 500%">
      <div id="content" style="margin-left:0px; float: left">
          <img src="image/1.jpg" height="220">
          <img src="image/2.png" height="220">
          <img src="image/3.jpg" height="220">
          <img src="image/4.jpg" height="220">
          <img src="image/5.jpg" height="220">
      </div>
      <div class="txt">
          <a href="#" class="active">1</a>
          <a href="#">2</a>
          <a href="#">3</a>
          <a href="#">4</a>
          <a href="#">5</a>
      </div>
  </div>


</div>

<script>
    var box = document.getElementById('box');
    var content = document.getElementById('content');
    var anchors = document.getElementsByTagName('a');
    var cOffsetWidth = content.scrollWidth;//内层 content容器的宽度
    var imgIndex = 0;
    function move(){
        var offfsetLeft = Math.abs(content.offsetLeft);//距离外层元素的位置在改变，数值是负的，改成正的。
        console.log(offfsetLeft)
        if (offfsetLeft+box.offsetWidth>=cOffsetWidth){//1000
            content.style.marginLeft = 0;
            imgIndex = 0;

//            clearInterval(t);
        } else {
            if (imgIndex>=anchors.length-1){
                imgIndex = 0;
            } else {
                imgIndex++;
            }

            content.style.marginLeft = parseInt(content.style.marginLeft)+(-368)+'px'
        }
        for(var i =0,len=anchors.length;i<len;i++){
            anchors[i].className = '';
        }
        console.log(imgIndex)
        anchors[imgIndex].className = 'active';

    }
    //鼠标放到元素上就会触发
    box.onmouseover = function(){
        clearInterval(t);
    }
    //鼠标移出元素上就会触发
    box.onmouseout = function(){
        t = setInterval(move,1000)
    }

    var t = setInterval(move,1000)

</script>
</body>
</html>